<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 用户信息
const userInfo = ref({
  username: '',
  registerDate: '',
  lastLogin: '',
  orderCount: 0,
  favoriteCount: 0
})

// 加载状态
const isLoading = ref(true)

// 初始化用户信息
onMounted(() => {
  // 检查用户是否已登录
  const isLoggedIn = localStorage.getItem('isLoggedIn') || sessionStorage.getItem('isLoggedIn')
  if (!isLoggedIn) {
    router.push('/login')
    return
  }
  
  // 加载用户信息
  loadUserInfo()
})

// 加载用户信息
const loadUserInfo = () => {
  try {
    // 从本地存储获取用户信息
    const username = localStorage.getItem('username') || sessionStorage.getItem('username')
    const registerDate = localStorage.getItem('registerDate') || new Date().toLocaleDateString()
    const lastLogin = localStorage.getItem('lastLogin') || new Date().toLocaleString()
    
    // 保存最后登录时间
    localStorage.setItem('lastLogin', new Date().toLocaleString())
    
    // 获取收藏夹和订单数量
    const favorites = localStorage.getItem('favorites')
    const favoriteCount = favorites ? JSON.parse(favorites).length : 0
    
    // 模拟订单数量
    const orderCount = Math.floor(Math.random() * 20) + 1
    
    // 设置用户信息
    userInfo.value = {
      username,
      registerDate,
      lastLogin,
      orderCount,
      favoriteCount
    }
  } catch (error) {
    console.error('加载用户信息失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 跳转到收藏夹
const goToFavorites = () => {
  router.push('/favorites')
}

// 跳转到订单管理
const goToOrders = () => {
  // 这里可以根据实际需求跳转到订单管理页面
  alert('订单管理功能正在开发中')
}

// 跳转到个人设置
const goToSettings = () => {
  // 这里可以根据实际需求跳转到个人设置页面
  alert('个人设置功能正在开发中')
}

// 处理登出
const handleLogout = () => {
  if (confirm('确定要退出登录吗？')) {
    // 清除登录状态
    localStorage.removeItem('isLoggedIn')
    localStorage.removeItem('username')
    sessionStorage.removeItem('isLoggedIn')
    sessionStorage.removeItem('username')
    
    // 跳转到登录页
    router.push('/login')
  }
}
</script>

<template>
  <div class="profile-container">
    <!-- 顶部导航 -->
    <header class="mall-header">
      <div class="header-main">
        <div class="container">
          <div class="logo">初遇小店</div>
          <div class="header-right">
            <router-link to="/mall" class="back-link">返回商城</router-link>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="profile-main">
      <div class="container">
        <div v-if="isLoading" class="loading">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>
        
        <div v-else class="profile-content">
          <!-- 用户信息卡片 -->
          <div class="profile-card">
            <div class="profile-avatar">
              <div class="avatar-placeholder">{{ userInfo.username.charAt(0).toUpperCase() }}</div>
            </div>
            <div class="profile-details">
              <h1 class="profile-username">{{ userInfo.username }}</h1>
              <div class="profile-stats">
                <div class="stat-item">
                  <span class="stat-value">{{ userInfo.orderCount }}</span>
                  <span class="stat-label">订单</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value">{{ userInfo.favoriteCount }}</span>
                  <span class="stat-label">收藏</span>
                </div>
              </div>
            </div>
            <div class="profile-actions">
              <button class="logout-btn" @click="handleLogout">退出登录</button>
            </div>
          </div>

          <!-- 用户详情信息 -->
          <div class="profile-info-section">
            <h2>账户信息</h2>
            <div class="info-list">
              <div class="info-item">
                <span class="info-label">注册时间:</span>
                <span class="info-value">{{ userInfo.registerDate }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">最后登录:</span>
                <span class="info-value">{{ userInfo.lastLogin }}</span>
              </div>
            </div>
          </div>

          <!-- 功能菜单 -->
          <div class="profile-menu">
            <h2>我的功能</h2>
            <div class="menu-grid">
              <div class="menu-item" @click="goToFavorites">
                <div class="menu-icon">⭐</div>
                <div class="menu-text">我的收藏</div>
              </div>
              <div class="menu-item" @click="goToOrders">
                <div class="menu-icon">📦</div>
                <div class="menu-text">我的订单</div>
              </div>
              <div class="menu-item" @click="goToSettings">
                <div class="menu-icon">⚙️</div>
                <div class="menu-text">个人设置</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="mall-footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-links">
            <div class="footer-column">
              <h4>购物指南</h4>
              <ul>
                <li><a href="#">注册与登录</a></li>
                <li><a href="#">购物流程</a></li>
                <li><a href="#">支付方式</a></li>
              </ul>
            </div>
            <div class="footer-column">
              <h4>配送服务</h4>
              <ul>
                <li><a href="#">配送范围</a></li>
                <li><a href="#">配送时间</a></li>
                <li><a href="#">配送费用</a></li>
              </ul>
            </div>
            <div class="footer-column">
              <h4>售后服务</h4>
              <ul>
                <li><a href="#">退换货政策</a></li>
                <li><a href="#">退款说明</a></li>
                <li><a href="#">投诉建议</a></li>
              </ul>
            </div>
          </div>
          <div class="footer-copyright">
            <p>&copy; 2023 初遇小店. 保留所有权利.</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
/* 个人主页容器 */
.profile-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
  background-color: #f8f9fa;
}

/* 顶部导航 */
.mall-header {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #ff6700;
}

.back-link {
  color: #666;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

.back-link:hover {
  color: #ff6700;
}

/* 主要内容 */
.profile-main {
  flex: 1;
  padding: 30px 0;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 加载状态 */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #ff6700;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 个人信息卡片 */
.profile-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.profile-avatar {
  margin-right: 30px;
  margin-bottom: 20px;
}

.avatar-placeholder {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 48px;
  font-weight: bold;
}

.profile-details {
  flex: 1;
  min-width: 200px;
  margin-bottom: 20px;
}

.profile-username {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.profile-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #ff6700;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.profile-actions {
  margin-left: auto;
}

.logout-btn {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #ff7875;
}

/* 信息区域 */
.profile-info-section,
.profile-menu {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
}

.profile-info-section h2,
.profile-menu h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #666;
  font-size: 16px;
}

.info-value {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

/* 功能菜单 */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 12px;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.menu-item:hover {
  background-color: #fff;
  border-color: #ff6700;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.menu-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.menu-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 页脚 */
.mall-footer {
  background-color: #333;
  color: #fff;
  padding: 40px 0;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.footer-column h4 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column li {
  margin-bottom: 10px;
}

.footer-column a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: #ff6700;
}

.footer-copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #555;
  color: #999;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-card {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-avatar {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .profile-actions {
    margin-left: 0;
    margin-top: 20px;
  }
  
  .profile-stats {
    justify-content: center;
  }
  
  .menu-grid {
    grid-template-columns: 1fr;
  }
}
</style>